<!--
 * @Descripttion: 
 * @Author: wayde
 * @Date: 2021-04-17 10:55:01
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chartDom = document.getElementById("chart");
    const chart = echarts.init(chartDom);
    const option = {
      title: {
        text: "数据可视化",
      },
      //直角坐标系 X 轴
      xAxis: {
        type: "category",
      },
      //直角坐标系 Y 轴
      yAxis: {},
      // 头部图标指示器
      legend: {
        data: [
          {
            name: "分类",
            // 强制设置图形为圆。
            icon: "circle",
            // 设置文本为红色
            textStyle: {
              color: "red",
            },
          },
          {
            name: "折线图",
            // 强制设置图形为圆。
            textStyle: {
              color: "rgb(238, 102, 102)",
            },
          },
          {
            name: "柱状图",
            // 强制设置图形为圆。
            textStyle: {
              color: "rgb(145, 204, 117)",
            },
          },
        ],
        left: 100,
      },
      //工具箱组件
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          restore: {},
          saveAsImage: {},
        },
      },
      dataZoom: [
        {
          //底部滑动条
          show: true,
          start: 0,
          end: 100,
        },
      ],
      dataset: {
        // 数据源
        source: [
          ["一季度", 79, 100, "分类1", 50],
          ["二季度", 81, 112, "分类2", 60],
          ["三季度", 88, 96, "分类3", 55],
          ["四季度", 72, 123, "分类4", 70],
        ],
      },
      // 直角坐标系底板
      grid: [
        {
          left: 50,
          top: 70,
        },
      ],
      series: [
        {
          name: "分类",
          type: "pie",
          center: ["65%", 60],
          radius: 35,
          encode: { itemName: 3, value: 4 },
          color: [
            "rgb(238, 102, 102)",
            "rgb(145, 204, 117)",
            "rgb(250, 200, 88)",
            "rgb(115, 192, 222)",
          ],
        },
        {
          name: "折线图",
          type: "line",
          encode: { x: 0, y: 2 },
          color: "#00FF00",
        },
        {
          name: "柱状图",
          type: "bar",
          encode: { x: 0, y: 1 },
          color: "rgb(145, 204, 117)",
          barWidth: 30,
          itemStyle: {
            borderColor: "#00C1DE",
            borderWidth: 1,
          },
        },
      ],
    };
    chart.setOption(option);
  </script>
</html>
